<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script type="text/javascript" src="./lib/vue-2.4.0.js"></script>
  </head>

  <body>
    <div id="app">
      <!-- <mylogin></mylogin> -->
      <login></login>
    </div>

    <script type="text/javascript">
      // 定义组件的时候，如果要定义全局的组件， Vue.component('组件的名称', {组件模版对象})

      // 通过 对象 字面量的形式， 定义了一个 组件模板对象
      var login = {
        template: "<h1>123</h1>"
      };

      //  通过  Vue.component把组件模板对象，注册为一个全局的Vue组件，同时，为这个组件起了一个名称，可以让我们  通过 标签形式，在页面中直接引入这个组件
      // Vue.component('mylogin', login)

      // Vue.component('mylogin', login);

      // 创建 Vue实例，得到 ViewModel
      var vm = new Vue({
        el: "#app",
        data: {},
        methods: {},
        components: {
          // '组件的名称': 组件的模板对象
          // 'mylogin': loginObj
          login // node中 对象中属性和方法的简写  变量将来解析为一个属性 属性名叫login 属性值也是login
          // login: login  // 属性值会引用定义的对象字面量
        }
      });
    </script>
  </body>
</html>
